new Vue({
    el: '#app1',
    data() {
        return {
            images: [
                { src: '../images/new-pro/huanggua.jpg' },
                { src: '../images/new-pro/huluobo.jpg' },
                { src: '../images/new-pro/lajiao.jpg' },
                { src: '../images/new-pro/qiezi.png' }
            ]
        };
    }
});


//联系我们
document.addEventListener('DOMContentLoaded', function () {
    const contactForm = document.querySelector('.contact .row form');

    // 表单提交事件监听
    contactForm.addEventListener('submit', function (event) {
        event.preventDefault(); // 阻止默认的表单提交行为

        // 获取表单元素
        const nameInput = contactForm.querySelector('input[type="text"]');
        const emailInput = contactForm.querySelector('input[type="email"]');
        const phoneInput = contactForm.querySelector('input[type="number"]');
        const messageTextarea = contactForm.querySelector('textarea');

        // 简单的表单验证
        if (!validateField(nameInput)) return;
        if (!validateEmail(emailInput)) return;
        if (!validateField(phoneInput)) return;
        if (!validateField(messageTextarea)) return;

        // 模拟表单提交
        simulateFormSubmission(contactForm);
    });
});

// 字段验证函数
function validateField(field) {
    if (field.value.trim() === '') {
        alert(`${field.placeholder}不能为空`);
        field.focus();
        return false;
    }
    return true;
}

// 邮箱验证函数
function validateEmail(emailField) {
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailPattern.test(emailField.value)) {
        alert('请输入有效的电子邮件地址');
        emailField.focus();
        return false;
    }
    return true;
}

// 模拟表单提交函数
function simulateFormSubmission(form) {
    // 模拟网络请求延迟
    setTimeout(() => {
        alert('感谢您的留言，我们将尽快回复您！');
        form.reset(); // 清空表单
    }, 1000); // 1秒延迟
}

//图标侧边栏
let searchForm = document.querySelector('.search-form');
let heart = document.querySelector('.heart');
let cart = document.querySelector('.shopping-cart');
let login = document.querySelector('.login-form');


document.querySelector('#search-btn').onclick = () => {
    searchForm.classList.toggle('active');
    heart.classList.remove('active');
    cart.classList.remove('active');
    login.classList.remove('active');
}

document.querySelector('#heart-btn').onclick = () => {
    heart.classList.toggle('active');
    cart.classList.remove('active');
    login.classList.remove('active');
    searchForm.classList.remove('active');
}

document.querySelector('#shop-btn').onclick = () => {
    cart.classList.toggle('active');
    heart.classList.remove('active');
    login.classList.remove('active');
    searchForm.classList.remove('active');
}

document.querySelector('#login-btn').onclick = () => {
    login.classList.toggle('active');
    heart.classList.remove('active');
    cart.classList.remove('active');
    searchForm.classList.remove('active');
}

// window.onscroll = () => {
//     heart.classList.remove('active');
//     cart.classList.remove('active');
//     login.classList.remove('active');
// }